<template>
  <div class="custom-dropdown" :class="{ 'is-open': isOpen }">
    <div class="dropdown-header" @click="toggleDropdown">
      <div class="word">
        <span class="prefix-text" v-if="prefixText">{{ prefixText }}</span>
        <div class="select-all">
          <span class="selected-text">{{ selectedText }}</span>
          <i class="el-icon-arrow-down"></i>
        </div>
      </div>
    </div>

    <div class="dropdown-options" v-show="isOpen" @click.stop>
      <div
        class="option-item"
        v-for="option in options"
        :key="option.value"
        :class="{ 'is-selected': internalValue === option.value }"
        @click="selectOption(option)"
      >
        <!-- <i class="fa-check" v-if="internalValue === option.value"></i> -->
        {{ option.label }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      default: "",
    },
    options: {
      type: Array,
      default: () => [],
    },
    prefixText: {
      type: String,
      default: "Select Language(s)",
    },
  },
  data() {
    return {
      isOpen: false,
      internalValue: this.value,
    };
  },
  computed: {
    selectedText() {
      const selectedOption = this.options.find(
        (o) => o.value === this.internalValue
      );
      return selectedOption ? selectedOption.label : "please select";
    },
  },
  watch: {
    value(newVal) {
      this.internalValue = newVal;
    },
    internalValue(newVal) {
      this.$emit("input", newVal);
    },
  },
  methods: {
    //点击打开下拉框
    toggleDropdown() {
      this.isOpen = !this.isOpen;
    },
    //选中的值，子传父
    selectOption(option) {
      this.internalValue = option.value;
      this.isOpen = false;
      this.$emit("change", option.value);
    },
    //监听点击关闭下拉框事件
    handleOutsideClick(event) {
      if (!this.$el.contains(event.target)) {
        this.isOpen = false;
      }
    },
  },
  mounted() {
    document.addEventListener("click", this.handleOutsideClick);
  },
  beforeDestroy() {
    document.removeEventListener("click", this.handleOutsideClick);
  },
};
</script>

<style scoped lang="scss">
.custom-dropdown {
  position: relative;
  width: 166px;

  .dropdown-header {
    display: flex;
    flex-direction: column;
    // height: 0.3264rem;
    justify-content: space-between;
    padding: .0347rem .0972rem;
    border: 1px solid #6a6969;
    border-radius: 8px;
    background-color: #fff;
    cursor: pointer;

    .word {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 100%; // 关键：占满父容器高度
    }

    .prefix-text {
      font-size: 10px;
      font-weight: 400;
      margin-bottom: 8px;
      color: #8f8f8f;
    }

    .select-all {
      color: #232323;
      font-size: 14px;
      font-weight: 400;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .selected-text {
      flex: 1;
      font-size: 14px;
      color: #454545;
    }

    .arrow-icon {
      font-family: "Font Awesome 6 Free";
      font-weight: 900;
      color: #6a6969;
      transition: transform 0.2s;
    }
  }

  .dropdown-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background-color: #fff;
    border: 1px solid #6a6969;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    z-index: 10;
    max-height: 200px;
    overflow-y: auto;

    .option-item {
      padding: 8px 12px;
      font-size: 14px;
      color: #232323;
      cursor: pointer;
      display: flex;
      align-items: center;

      .fa-check {
        color: #6dd1ff;
      }

      &:hover {
        background-color: #fff;
        color: #6a6969;
      }

      &.is-selected {
        background-color: #fff;
        color: #232323;
      }
    }
  }

  &.is-open .arrow-icon {
    transform: rotate(180deg);
  }
}
</style>
